<template>
	<div>
		<div class="boxColor"></div>
		<img src="../../assets/logo1.png" class="logoImg">
		<div class="login-box" v-cloak>

			<div class="login-logo" style="color: #004423;">
				<b>后台管理系统</b>
			</div>
			<!-- /.login-logo -->
			<div class="login-box-body">
				<div v-if="error" class="alert alert-danger alert-dismissible">
					<h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" v-model="username" placeholder="账号">
					<span class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" v-model="password" placeholder="密码">
					<span class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
					<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode"> &nbsp;&nbsp;&nbsp;&nbsp;
					<a href="javascript:;" @click="refreshCode">点击刷新</a>
				</div>

				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button type="button" class="btn btn-primary btn-block btn-flat" @click="login" style="background: #004423;border: none;border-radius: 4px;">登录</button>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.social-auth-links -->

			</div>
			<!-- /.login-box-body -->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				captcha: '',
				error: false,
				errorMsg: '',
				src: 'http://10.32.0.155/sy-erp/captcha.jpg',
				active: [],
			};
		},
		methods: {
			refreshCode: function() {
				this.src = "http://10.32.0.155/sy-erp/captcha.jpg?t=" + $.now();
			},
			login: function(event) {
				var vm = this;
				var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha;
				console.log(data)
				$.ajax({
					type: "POST",
					url: "http://10.32.0.155/sy-erp/sys/login",
					data: data,
					dataType: "json",
					xhrFields: {withCredentials: true},
					success: function(data) {
						console.log(data)
						if(data.code == 0) { //登录成功
							//parent.location.href ='index.html';
							vm.$router.replace('/index');
							sessionStorage.setItem("userInfoStorage", data.msg); 
						} else {
							vm.error = true;
							vm.errorMsg = result.msg;
							vm.refreshCode();
						}
						
					}
				});

			}

		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
	
	.logoImg {
		position: absolute;
		width: 150px;
		top: 20px;
		left: 30px;
	}
	
	.login-box {
		background: #FFF;
		border: 1px solid #ccc;
	}
	
	.login-logo {
		padding-top: 20px;
	}
	
	.login-box {
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin: 0 auto;
		padding: 38px 0;
	}
	
	.login-box,
	.register-box {
		width: 512px;
	}
	
	.login-box-body,
	.register-box-body {
		background: #fff;
		padding: 20px 30px;
		border-top: 0;
		color: #666;
	}
	
	.boxColor {
		background: #004F29;
		position: absolute;
		height: 290px;
		width: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 0;
	}
</style>